<template>
  <div class="attendance-page">

    <div class="status-container">
      <div class="status-item">
        <span class="status-dot" :class="workStartStatusClass"></span>
        <span class="status-text">{{ workStartStatus }}</span>
        <span class="time-text">{{ workStartTime }}</span>
      </div>
      <div class="status-divider"></div>
      <div class="status-item">
        <span class="status-dot" :class="workEndStatusClass"></span>
        <span class="status-text">{{ workEndStatus }}</span>
        <span class="time-text">{{ workEndTime }}</span>
      </div>
    </div>
    <div class="location-tip">
      <span class="tip-icon"></span>
      <span class="tip-text">{{ locationStatus }}：{{ locationInfo }}</span>
    </div>
    <button class="punch-button" @click="handlePunch">
      <span class="punch-text">{{ currentPunchType }}</span>
      <span class="punch-time">{{ currentTime }}</span>
    </button>
    <div class="make-up-tip">
      <span>忘记打卡？</span>
      <a href="#" class="make-up-link">马上补卡</a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AttendancePage',
  data() {
    return {
      // 打卡状态数据，实际项目中从后端获取
      workStartStatus: '未打卡',
      workStartTime: '09:00上班',
      workEndStatus: '未打卡',
      workEndTime: '18:00下班',
      locationStatus: '打卡位置',
      locationInfo: '',
      currentPunchType: '打卡',
      currentTime: this.getFormattedTime(),
      position: {},
    };
  },
  computed: {
    // 根据打卡状态计算样式类
    workStartStatusClass() {
      return this.getStatusClass(this.workStartStatus);
    },
    workEndStatusClass() {
      return this.getStatusClass(this.workEndStatus);
    }
  },
  methods: {
    // 获取格式化的当前时间
    getFormattedTime() {
      const now = new Date();
      return now.toTimeString().slice(0, 8);
    },
    // 根据状态获取对应的样式类
    getStatusClass(status) {
      switch(status) {
        case '正常':
          return 'status-normal';
        case '迟到':
          return 'status-late';
        case '早退':
          return 'status-early';
        default:
          return 'status-absent';
      }
    },
    // 打卡按钮点击事件（仅前端展示，不处理业务逻辑）
    handlePunch() {
      this.locationInfo = '定位中...'
      // 获取位置
      this.getLocation().then(location => {
        // 发送打卡请求，传递正确的参数格式
        const punchData = {
          longitude: location.longitude,
          latitude: location.latitude,
        }
        
        console.log(`触发${this.currentPunchType}，前端不处理业务逻辑`);
        this.$api.attendance.punch(punchData).then(res => {
          //如果是12点之前，打卡类型为上班打卡
          if(this.currentTime < '12:00'){
            this.workStartStatus = res.data.workstate
            this.locationInfo = res.data.location
            this.workStartTime = this.currentTime
          }else{
            this.workEndStatus = res.data.workstate
            this.locationInfo = res.data.location
            this.workEndTime = this.currentTime
          }
          console.log(res)
        }).catch(err => {
          console.error('打卡失败:', err)
        })
      }).catch(err => {
        console.log(err)
      })
    },
    // 获取位置信息
    getLocation() {
      return new Promise((resolve, reject) => {
        navigator.geolocation.getCurrentPosition(
            // 定位成功
            (position) => {
              const longitude = position.coords.longitude; // 经度
              const latitude = position.coords.latitude; // 纬度
              resolve({ longitude, latitude });
              console.log('定位成功', position);
              this.position = position
            },
            // 定位失败（用户拒绝/超时/设备问题）
            (error) => {
              const errorMap = {
                1: '你拒绝了定位权限，无法自动获取地址',
                2: '定位信息获取失败，请检查设备定位是否开启',
                3: '定位请求超时，请稍后重试'
              };
              reject(new Error(errorMap[error.code] || `定位错误：${error.message}`));
            },
            // 定位参数配置
            {
              enableHighAccuracy: true, // 高精度定位（更准，适合打卡场景）
              timeout: 10000, // 超时时间10秒
              maximumAge: 0 // 不使用缓存（每次获取最新位置）
            }
        );
      });
    },
    // 将经纬度传递给后端解析，判断是否在考勤范围内
    parseLocation(location) {
      return new Promise((resolve, reject) => {
        this.$api.attendance.parseLocation(location).then(res => {
          if(res.code === 200){
            resolve(res.data)
            console.log('定位解析成功', res.data);
          }else{
            reject(new Error(res.msg || '定位解析失败'))
          }
        }).catch(err => {
          reject(err)
        })
      })
    },


  },

  // 定时更新当前时间--每秒钟更新一次
  mounted() {
    this.timeInterval = setInterval(() => {
      this.currentTime = this.getFormattedTime();
    }, 1000);
  },

  // 清理定时器，避免内存泄漏--在组件销毁时调用
  beforeDestroy() {
    clearInterval(this.timeInterval);
  }

};
</script>

<style scoped>
/* 基础样式设置，使用相对单位确保自适应 */
.attendance-page {
  /* 最大宽度限制，防止在超大屏幕上过于拉伸 */
  max-width: 600px;
  /* 最小宽度限制，确保在小屏幕上内容不会过于拥挤 */
  min-width: 300px;
  /* 居中显示，左右外边距自动适应 */
  margin: 5vh auto;
  /* 内边距使用视窗宽度的百分比，随屏幕大小变化 */
  padding: 3vw;
  /* 背景色和边框增加视觉层次感 */
  background-color: #fff;
  border-radius: 1vw;
  box-shadow: 0 0 2vw rgba(0, 0, 0, 0.1);
  /* 使用相对字体大小，随父元素变化 */
  font-size: 1rem;
  font-family: 'Microsoft YaHei', sans-serif;
}

.page-title {
  text-align: center;
  /*  margin使用em单位，相对于字体大小 */
  margin-bottom: 1.5em;
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
}

.tab-group {
  display: flex;
  margin-bottom: 1.5em;
  border-bottom: 0.05rem solid #e5e6eb;
}

.tab-button {
  /* 弹性布局使按钮均匀分布 */
  flex: 1;
  padding: 0.8em 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-size: 1rem;
  color: #666;
  /* 过渡效果使切换更平滑 */
  transition: all 0.3s ease;
}

.tab-button.active {
  color: #2b8def;
  /* 底部边框指示当前选中状态 */
  border-bottom: 0.15rem solid #2b8def;
}

.status-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1em;
  padding: 1em;
  background-color: #f9fafc;
  border-radius: 0.5vw;
}

.status-item {
  display: flex;
  align-items: center;
}

.status-dot {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  margin-right: 0.5em;
  background-color: #c9cdd4; /* 默认未打卡颜色 */
}

/* 不同状态的颜色标识 */
.status-normal {
  background-color: #28a745; /* 正常 - 绿色 */
}

.status-late {
  background-color: #dc3545; /* 迟到 - 红色 */
}

.status-early {
  background-color: #ffc107; /* 早退 - 黄色 */
}

.status-text {
  font-size: 1rem;
  color: #333;
  margin-right: 0.5em;
}

.time-text {
  font-size: 0.9rem;
  color: #999;
}

.status-divider {
  width: 0.05rem;
  height: 2em;
  background-color: #e5e6eb;
  margin: 0 1em;
}

.location-tip {
  display: flex;
  align-items: center;
  margin-bottom: 2em;
  padding: 1em;
  background-color: #f9fafc;
  border-radius: 0.5vw;
}

.tip-icon {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background-color: #28a745;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'/%3E%3C/svg%3E");
  margin-right: 0.5em;
}

.tip-text {
  font-size: 1rem;
  color: #333;
}

/* 打卡按钮使用视窗单位确保在不同屏幕上比例一致 */
.punch-button {
  display: block;
  width: 30vw;
  height: 30vw;
  max-width: 150px;
  max-height: 150px;
  margin: 0 auto 1.5em;
  border-radius: 50%;
  background-color: #2b8def;
  color: #fff;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  /* 阴影效果增强立体感 */
  box-shadow: 0 0.5vw 1vw rgba(43, 141, 239, 0.3);
  transition: transform 0.2s ease;
}

/* 按钮点击效果 */
.punch-button:active {
  transform: scale(0.95);
}

.punch-text {
  display: block;
  margin-bottom: 0.5em;
  font-weight: bold;
}

.punch-time {
  font-size: 0.9rem;
  opacity: 0.9;
}

.make-up-tip {
  text-align: center;
  font-size: 0.9rem;
  color: #666;
  margin-top: 2em;
}

.make-up-link {
  color: #2b8def;
  text-decoration: none;
  margin-left: 0.3em;
}

/* 响应式调整：针对小屏幕设备 */
@media (max-width: 480px) {
  .status-container {
    padding: 0.8em 0.5em;
  }

  .status-text {
    font-size: 0.9rem;
  }

  .time-text {
    font-size: 0.8rem;
  }

  .tip-text {
    font-size: 0.9rem;
  }
}
</style>